<template>
    <div class="container">
        <div class="login-box">
            <div class="owl" ref="owl">
                <div class="hide-l" ref="leftEye">
                    <div class :style="{
                        height: '20px',
                        backgroundColor: '#000',
                        borderRadius: '100%',
                        position: 'absolute',
                        left: leftEyeStyle.left,
                        top: leftEyeStyle.top,
                        width: '20px',
                    }" ref="leftEyeBall"></div>
                </div>
                <div class="hide-r" ref="rightEye">
                    <div :style="{
                        height: '20px',
                        backgroundColor: '#000',
                        borderRadius: '100%',
                        position: 'absolute',
                        left: rightEyeStyle.left,
                        top: rightEyeStyle.top,
                        width: '20px',
                    }" ref="rightEyeBall"></div>
                </div>
                <div class="hand"></div>
                <div class="hand hand-r"></div>
                <div class="arms">
                    <div class="arm"></div>
                    <div class="arm arm-r"></div>
                </div>
            </div>
            <div class="input-box">
                <input type="text" placeholder="账号">
                <input type="password" placeholder="密码" ref="password" @focus="pwdFocus" @blur="pwdBlur">
                <input type="password" placeholder="请确认密码" ref="password" @focus="pwdFocus" @blur="pwdBlur">
                <!-- <button>注册</button> -->
                <p class="btn">
                    <router-link to="/login" class="login">登录</router-link>
                    <span>/</span>
                    <span class="register">注册</span>
                </p>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, computed, nextTick } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();
const password = ref()
const owl = ref()

console.log(password, 'apassword');

const pwdFocus = () => {
    console.log(owl.value.classList.add('password'));
    rightEyeBallPosition.left = 10;
    rightEyeBallPosition.top = 10;
    leftEyeBallPosition.left = 10;
    leftEyeBallPosition.top = 10;
    document.removeEventListener("mousemove", handleMouseMove);

}
const pwdBlur = () => {
    console.log(owl.value.classList.remove('password'));
    document.addEventListener("mousemove", handleMouseMove);
}
const leftEye = ref();
const rightEye = ref();
const rightEyeBall = ref();
const leftEyeBall = ref();
const leftEyeStyle = computed(() => ({
    left: rightEyeBallPosition.left + "px",
    top: rightEyeBallPosition.top + "px",
}));
const rightEyeStyle = computed(() => ({
    left: rightEyeBallPosition.left + "px",
    top: rightEyeBallPosition.top + "px",
}));
const leftEyeBallPosition = reactive({ left: 5, top: 5 });
const rightEyeBallPosition = reactive({ left: 5, top: 5 });
// 计算眼球位置的函数
function calculateEyePosition(eyeElement: any, eyeBall: any, e: any) {
    //获取鼠标横坐标
    const mouseX = e.clientX;
    //获取鼠标纵坐标
    const mouseY = e.clientY;

    // 获取眼睛元素的位置和尺寸
    const eyeRect = eyeElement.getBoundingClientRect();
    // 计算眼睛中心点的坐标(坐标原点为视口左上角)
    const eyeCenterX = eyeRect.left + eyeRect.width / 2;
    const eyeCenterY = eyeRect.top + eyeRect.height / 2;

    //计算眼球的最大移动直径
    const maxRadius = eyeElement.clientWidth - eyeBall.clientWidth;

    //计算纵向比例尺
    const scaleY = window.innerHeight / maxRadius;

    const scaleX = window.innerWidth / maxRadius;

    //计算距离眼球中心横纵偏移量
    const offsetX = mouseX - eyeCenterX;
    const offsetY = mouseY - eyeCenterY;

    //计算眼球的新位置
    const newLeft = 10 + offsetX / scaleX;
    const newTop = 10 + offsetY / scaleY;

    return { left: newLeft, top: newTop };
}
const handleMouseMove = (e: MouseEvent) => {
    // 计算最大可移动半径

    // 计算左眼和右眼的位置
    const newRightEyeBallPosition = calculateEyePosition(
        rightEye.value,
        rightEyeBall.value,
        e
    );
    const newLeftEyeBallPosition = calculateEyePosition(
        leftEye.value,
        rightEyeBall.value,
        e
    );

    rightEyeBallPosition.left = newRightEyeBallPosition.left;
    rightEyeBallPosition.top = newRightEyeBallPosition.top;
    leftEyeBallPosition.left = newLeftEyeBallPosition.left;
    leftEyeBallPosition.top = newLeftEyeBallPosition.top;
};

onMounted(() => {
    document.addEventListener("mousemove", handleMouseMove);
});

onUnmounted(() => {
    document.removeEventListener("mousemove", handleMouseMove);
});
</script>


<style scoped lang="scss">
.container {
    width: 100%;
    /* 100%窗口高度 */
    height: 100vh;
    /* 弹性布局 居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 渐变背景 */
    background: linear-gradient(200deg, #72afd3, #96fbc4);
}

.login-box {
    /* 相对定位 */
    position: relative;
    width: 320px;
}

.input-box {
    /* 弹性布局 垂直排列 */
    display: flex;
    flex-direction: column;
}

.input-box input {
    height: 40px;
    border-radius: 3px;
    /* 缩进15像素 */
    text-indent: 15px;
    outline: none;
    border: none;
    margin-bottom: 15px;
}

.input-box input:focus {
    outline: 1px solid lightseagreen;
}

.btn {
    //   width: 150px;
    height: 40px;
    display: flex;
    justify-content: space-between;
    line-height: 40px;
    background-color: #1dc797;
    border: none;
        border-radius: 3px;
padding: 0 10px;
    margin-top: 20px;
    color: #fff;
    letter-spacing: 8px;
    text-indent: 10px;
    cursor: pointer;
transition: 0.3s;

    & .login {
        color: #fff;
        text-decoration: none;
        margin-left: -10px;
        text-align: center;
        width: 40%;
        line-height: 40px;
    }

    & .register {
        margin-right: -10px;
        text-align: center;
        width: 40%;
        line-height: 40px;
    }

    .login:hover {
        background-color: #6cd4b7;
    }

    .register:hover {

        background-color: #6cd4b7;
    }
}



/* 接下来是猫头鹰的样式 */
.owl {
    width: 211px;
    height: 108px;
    /* 背景图片 */
    background: url("../assets/images/owl-login.png") no-repeat;
    /* 绝对定位 */
    position: absolute;
    top: -100px;
    /* 水平居中 */
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;

    .hide-l {
        width: 40px;
        height: 40px;
        background: #fff;
        border-radius: 50%;
        position: absolute;
        bottom: 14%;
        left: 29%;
    }

    .hide-r {
        width: 40px;
        height: 40px;
        background: #fff;
        border-radius: 50%;
        position: absolute;
        bottom: 14%;
        left: 55%;
    }
}

.owl .hand {
    width: 34px;
    height: 34px;
    border-radius: 40px;
    background-color: #472d20;
    /* 绝对定位 */
    position: absolute;
    left: 12px;
    bottom: -8px;
    /* 沿Y轴缩放0.6倍（压扁） */
    transform: scaleY(0.6);
    /* 动画过渡 */
    transition: 0.3s ease-out;
}

.owl .hand.hand-r {
    left: 170px;
}

.owl.password .hand {
    transform: translateX(45px) translateY(-15px) scale(0.7);
}

.owl.password .hand.hand-r {
    transform: translateX(-42px) translateY(-15px) scale(0.7);
}

.owl .arms {
    position: absolute;
    top: 58px;
    width: 100%;
    height: 41px;
    overflow: hidden;
}

.owl .arms .arm {
    width: 48px;
    height: 48px;
    position: absolute;
    left: 20px;
    top: 40px;
    background: url("../assets/images/owl-login-arm.png") no-repeat;
    transform: rotate(-20deg);
    transition: 0.3s ease-out;
}

.owl .arms .arm.arm-r {
    transform: rotate(20deg) scaleX(-1);
    left: 158px;
}

.owl.password .arms .arm {
    transform: translateY(-40px) translateX(40px);
}

.owl.password .arms .arm.arm-r {
    transform: translateY(-40px) translateX(-48px) scaleX(-1);
}

// .owl .hand{
//     width: 34px;
//     height: 34px;
//     border-radius: 40px;
//     background-color: #472d20;
//     /* 绝对定位 */
//     position: absolute;
//     left: 12px;
//     bottom: -8px;
//     /* 沿Y轴缩放0.6倍（压扁） */
//     transform: scaleY(0.6);
//     /* 动画过渡 */
//     transition: 0.3s ease-out;
// }
// .owl .hand.hand-r{
//     left: 170px;
// }
// .owl.password .hand{
//     transform: translateX(42px) translateY(-15px) scale(0.7);
// }
// .owl.password .hand.hand-r{
//     transform: translateX(-42px) translateY(-15px) scale(0.7);
// }
// .owl .arms{
//     position: absolute;
//     top: 58px;
//     width: 100%;
//     height: 41px;
//     overflow: hidden;
// }
// .owl .arms .arm{
//     width: 40px;
//     height: 65px;
//     position: absolute;
//     left: 20px;
//     top: 40px;
//     background: url("../images/owl-login-arm.png") no-repeat;
//     transform: rotate(-20deg);
//     transition: 0.3s ease-out;
// }
// .owl .arms .arm.arm-r{
//     transform: rotate(20deg) scaleX(-1);
//     left: 158px;
// }
// .owl.password .arms .arm{
//     transform: translateY(-40px) translateX(40px);
// }
// .owl.password .arms .arm.arm-r{
//     transform: translateY(-40px) translateX(-40px) scaleX(-1);
// }
</style>